*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
ul{
 list-style: none;
}
a{

 text-decoration: none;

}
.conten{
 width: 1200px;
 height: 1200px;
 margin: 0 auto;
 background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff7afd7a0-ffba-4ce5-85f3-486f7f0fbb44%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684589074&t=ba76bb55a937400d33a9a90920d945b5');
}
.daohang{
 display: flex;
 justify-content: space-between;
  background-color: rgb(183, 226, 243);
}
.daohang>li>a{
 display: block;
 width: 60px;
 height: 60px;

 text-align: center;
 line-height: 60px;
}
.daohang>li>a:hover{
 background-color: rgb(231, 144, 144);
}
/* main */
.board{
 width: 300px;
 height: 300px;
 border: 1px solid rgb(193, 33, 33);
 display: block;
}
.liuyan{
 text-align: center;
 margin: 5px 0;

}
.int{
 width: 100%;
 height: 40px;
 padding-left: 10px;
 outline: none 
}
.int:focus {
  border: 2px solid rgb(135, 197, 235);
}
.btn{
 width: 40px;
 height: 30px;
}
.main>p{
 margin: 5px 0;
 height: 30px;
 padding-left: 10px;
 border: 1px solid rgb(161, 25, 25);
}
/* 2 */
.game{
  width: 400px;
  height: 400px;

  padding: 20px;
  display: none;
}
.game-box{
  height: 60px;
  background-color: rgb(226, 154, 154);
  display: flex;
  align-items: center;
}
.game-ul{
  padding-left: 30px;
  display: flex;
  justify-content: space-between;
}
.game-ul>li{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.dian{
 transform: translateZ(30px);
}
.dian1{
  background: url('./diceK3.png') 0px 0px;
  background-size: 70px;
}
.dian2{
  background: url('./diceK3.png') 0px -35px;
  background-size: 70px;
}
.dian3{
  background: url('./diceK3.png') 0px -70px;
  background-size: 70px;
}
.dian4{
  background: url('./diceK3.png') 0px -105px;
  background-size: 70px;
}
.dian5{
  background: url('./diceK3.png') 0px -140px;
  background-size: 70px;
}
.dian6{
  background: url('./diceK3.png') 0px -175px;
  background-size: 70px;
}
.dian7{
  background: url('./diceK3.png') 35px 0px;
  background-size: 70px;
}
.dian8{
  background: url('./diceK3.png') 35px -35px;
  background-size: 70px;
}
.dian9{
  background: url('./diceK3.png') 35px -70px;
  background-size: 70px;
}
.dian10{
  background: url('./diceK3.png') 35px -105px;
  background-size: 70px;
}
.game-right{
  flex:1;
  text-align: center;
}
.jilu{
  height: 200px;
  border: 1px solid #000;
  text-align: center;
}
/* 3 */
.xinxi{
height: 500px;
 display: none;
 background: linear-gradient(to right top,pink, rgb(201, 215, 244));
}
h1 {
  color: rgb(250, 116, 62);
  text-align: center;

  margin: 20px 0;
 
}
.biaoge {
  margin:0 auto;
  width: 800px;
  border-collapse: collapse;
  color:#004085;
}
.biaoge th {
  padding: 10px;
  background: #cfe5ff;
  
  font-size: 20px;
  font-weight: 400;
}
.biaoge td, .biaoge th {
  border:1px solid #b8daff;
}
.biaoge td {
  padding:10px;
  color:#666;
  text-align: center;
  font-size: 16px;
}
.modie{
 width: 200px;
}
tbody tr {
  background: #fff;
}
.meixiang tr:hover {
  background: #e1ecf8;
}
.info {
  width: 900px;
  margin: 50px auto;
  text-align: center;
}
.info  input, .info select {
  width: 80px;
  height: 27px;
  outline: none;
  border-radius: 5px;
  border:1px solid #b8daff;
  padding-left: 5px;
  box-sizing: border-box;
  margin-right: 15px;
}
.info button {
  width: 60px;
  height: 27px;
  background-color: #004085;
  outline: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
.info .age {
  width: 50px;
}
/* footer */
.time{
 width: 300px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 background-color: rgb(207, 99, 99);
 color: #fff;
}